<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>参赛报名 - 数智化赋能"微情境·微宣讲"红色实践活动</title>
  <!-- 引入Swiper CSS -->
  <link rel="stylesheet" href="../templates/h5/assets/swiper-bundle.min.css">
  <!-- 引入Tailwind CSS -->
  <script src="../templates/h5/assets/tailwindcss3.4.17.css"></script>
  <!-- 引入Font Awesome -->
  <link href="../templates/h5/assets/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <script>
    // 配置Tailwind自定义颜色（红色主题）
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#b71211', // 主红色
            secondary: '#FFD700', // 辅助金色
            red: {
              700: '#B91C1C',    // 稍浅红色
              800: '#991B1B',    // 深一点的红色
              900: '#7F1D1D',    // 最深红色
            }
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      /* 导航栏样式 */
      .nav-item {
        @apply flex flex-col items-center justify-center text-gray-300 active:bg-red-800 h-full;
      }
      .nav-item.active {
        @apply text-white;
      }
      .nav-icon {
        @apply text-lg mb-1;
      }
      .nav-text {
        @apply text-xs;
      }
      
      /* 表单样式 */
      .form-section {
        @apply bg-red-800 rounded-lg p-4 mb-4 border border-red-700;
      }
      .form-label {
        @apply block text-sm mb-2 font-medium;
      }
      .form-input {
        @apply w-full bg-red-900 border border-red-700 rounded px-3 py-2 text-white text-sm focus:outline-none focus:border-secondary;
      }
      .upload-area {
        @apply w-full bg-red-900/50 border-2 border-dashed border-red-700 rounded p-4 text-center cursor-pointer hover:border-secondary transition-colors;
      }
      .file-info {
        @apply text-xs text-gray-200 mt-1;
      }
    }
  </style>
</head>
<body class="bg-primary text-white">
  <div class="max-w-md mx-auto min-h-screen flex flex-col">
    <!-- 页面标题 -->
    <div class="py-4 px-4 border-b border-red-700 bg-red-900 flex justify-between items-center">
      <a href="#" class="text-white"><i class="fa fa-arrow-left"></i></a>
      <h1 class="text-xl font-bold">参赛报名表</h1>
      <span class="w-6"></span> <!-- 占位，保持标题居中 -->
    </div>
    
    <!-- 页面内容区 -->
    <div class="flex-1 overflow-y-auto p-4 pb-24">
      <!-- 表单说明 -->
      <div class="form-section">
        <p class="text-sm text-gray-100">
          请准确填写以下信息并上传相关材料，带 <span class="text-secondary">*</span> 的为必填项
        </p>
      </div>
      
      <!-- 作品信息 -->
      <div class="form-section">
        <h2 class="text-lg font-bold mb-4 flex items-center">
          <i class="fa fa-pencil-square-o mr-2 text-secondary"></i>作品信息
        </h2>
        
        <!-- 作品名称 -->
        <div class="mb-4">
          <label class="form-label">
            作品名称 <span class="text-secondary">*</span>
          </label>
          <input type="text" class="form-input" placeholder="请输入作品名称">
        </div>
        
        <!-- 作品封面 -->
        <div class="mb-4">
          <label class="form-label">
            作品封面 <span class="text-secondary">*</span>
          </label>
          <div class="upload-area" id="coverUpload">
            <input type="file" accept="image/*" class="hidden" id="coverFile">
            <i class="fa fa-upload text-secondary text-xl mb-1"></i>
            <p class="text-sm">点击上传作品封面图</p>
            <p class="file-info">支持JPG、PNG格式，建议尺寸1080×720</p>
          </div>
        </div>
        
        <!-- 作品简介 -->
        <div class="mb-4">
          <label class="form-label">
            作品简介 <span class="text-secondary">*</span>
          </label>
          <textarea 
            class="form-input h-24 resize-none" 
            placeholder="请简要介绍您的作品，字数100字以内"
            maxlength="100"
          ></textarea>
          <div class="text-right text-xs text-gray-300 mt-1">
            <span id="wordCount">0</span>/100
          </div>
        </div>
        
        <!-- 联系人 -->
        <div class="mb-4">
          <label class="form-label">
            联系人 <span class="text-secondary">*</span>
          </label>
          <input type="text" class="form-input" placeholder="请输入联系人姓名">
        </div>
      </div>
      
      <!-- 作品文件上传 -->
      <div class="form-section">
        <h2 class="text-lg font-bold mb-4 flex items-center">
          <i class="fa fa-file-text-o mr-2 text-secondary"></i>作品文件上传
        </h2>
        
        <!-- 微情景剧本 -->
        <div class="mb-4">
          <label class="form-label">
            微情景剧本 <span class="text-secondary">*</span>
          </label>
          <div class="upload-area" id="scriptUpload">
            <input type="file" accept=".doc,.docx" class="hidden" id="scriptFile">
            <i class="fa fa-upload text-secondary text-xl mb-1"></i>
            <p class="text-sm">点击上传微情景剧本</p>
            <p class="file-info">Word文档（.doc/.docx），不超过20MB</p>
          </div>
        </div>
        
        <!-- 微情境视频 -->
        <div class="mb-4">
          <label class="form-label">
            微情境视频 <span class="text-secondary">*</span>
          </label>
          <div class="upload-area" id="video1Upload">
            <input type="file" accept=".mp4" class="hidden" id="video1File">
            <i class="fa fa-upload text-secondary text-xl mb-1"></i>
            <p class="text-sm">点击上传微情境视频</p>
            <p class="file-info">3-5分钟，MP4格式，分辨率不低于1080P，500MB以下</p>
          </div>
        </div>
        
        <!-- 微宣讲视频 -->
        <div class="mb-4">
          <label class="form-label">
            微宣讲视频 <span class="text-secondary">*</span>
          </label>
          <div class="upload-area" id="video2Upload">
            <input type="file" accept=".mp4" class="hidden" id="video2File">
            <i class="fa fa-upload text-secondary text-xl mb-1"></i>
            <p class="text-sm">点击上传微宣讲视频</p>
            <p class="file-info">3-5分钟，MP4格式，分辨率不低于1080P，500MB以下</p>
          </div>
        </div>
        
        <!-- 宣讲文稿 -->
        <div class="mb-4">
          <label class="form-label">
            宣讲文稿 <span class="text-secondary">*</span>
          </label>
          <div class="upload-area" id="speechUpload">
            <input type="file" accept=".doc,.docx" class="hidden" id="speechFile">
            <i class="fa fa-upload text-secondary text-xl mb-1"></i>
            <p class="text-sm">点击上传宣讲文稿</p>
            <p class="file-info">Word文档（.doc/.docx），不超过20MB</p>
          </div>
        </div>
        
        <!-- 其他附件 -->
        <div class="mb-4">
          <label class="form-label">
            其他附件
          </label>
          <div class="upload-area" id="otherUpload">
            <input type="file" accept=".doc,.docx,.ppt,.pptx,.zip,.rar" class="hidden" id="otherFile">
            <i class="fa fa-upload text-secondary text-xl mb-1"></i>
            <p class="text-sm">点击上传其他附件（可选）</p>
            <p class="file-info">支持word、ppt、zip等格式，不超过50MB</p>
          </div>
        </div>
      </div>
      
      <!-- 免责声明 -->
      <div class="form-section">
        <div class="flex items-start mb-2">
          <input type="checkbox" id="agreement" class="mt-1 mr-2">
          <label for="agreement" class="text-sm">
            我已阅读并同意<a href="index_mianze.html" class="text-secondary">《参赛作品免责声明》</a>，确认所提交的作品为原创作品，不侵犯任何第三方权益，如违反上述承诺，愿意承担相应法律责任。<span class="text-secondary">*</span>
          </label>
        </div>
      </div>
      
      <!-- 提交按钮 -->
      <div class="pt-2">
        <button id="submitBtn" class="w-full bg-secondary text-red-900 py-3 rounded font-medium text-sm opacity-50 cursor-not-allowed">
          提交报名
        </button>
      </div>
    </div>
    
    <!-- 底部固定导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-red-900 border-t border-red-700 z-50 h-16 flex">
      <a href="/h5/index" class="nav-item active flex-1">
        <i class="nav-icon fa fa-home"></i>
        <span class="nav-text">首页</span>
      </a>
      <a href="/h5/index_huodong" class="nav-item flex-1">
        <i class="nav-icon fa fa-calendar"></i>
        <span class="nav-text">活动</span>
      </a>
      <a href="/h5/index_paihangbang" class="nav-item flex-1">
        <i class="nav-icon fa fa-bar-chart"></i>
        <span class="nav-text">排行榜</span>
      </a>
      <a href="/h5/index_yonghu" class="nav-item flex-1">
        <i class="nav-icon fa fa-user"></i>
        <span class="nav-text">我的</span>
      </a>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 导航栏切换效果
      const navItems = document.querySelectorAll('.nav-item');
      navItems.forEach(item => {
        item.addEventListener('click', function(e) {
          //e.preventDefault();
          navItems.forEach(nav => nav.classList.remove('active'));
          this.classList.add('active');
        });
      });

      // 文件上传区域点击触发文件选择
      const uploadAreas = document.querySelectorAll('.upload-area');
      uploadAreas.forEach(area => {
        area.addEventListener('click', function() {
          const fileInput = this.querySelector('input[type="file"]');
          fileInput.click();
        });

        // 显示已选择的文件名
        const fileInput = area.querySelector('input[type="file"]');
        fileInput.addEventListener('change', function() {
          if (this.files.length > 0) {
            const fileName = this.files[0].name;
            const fileInfo = area.querySelector('.file-info');
            area.querySelector('p').textContent = `已选择: ${fileName}`;

            // 检查文件大小
            if (this.files[0].size > getMaxFileSize(area.id)) {
              alert('文件大小超过限制，请重新选择');
              this.value = '';
              resetUploadArea(area);
            }
          }
        });
      });

      // 根据上传区域ID获取最大文件大小限制（字节）
      function getMaxFileSize(areaId) {
        const sizes = {
          'coverUpload': 20 * 1024 * 1024,       // 20MB
          'scriptUpload': 20 * 1024 * 1024,      // 20MB
          'video1Upload': 500 * 1024 * 1024,     // 500MB
          'video2Upload': 500 * 1024 * 1024,     // 500MB
          'speechUpload': 20 * 1024 * 1024,      // 20MB
          'otherUpload': 50 * 1024 * 1024        // 50MB
        };
        return sizes[areaId] || 20 * 1024 * 1024;
      }

      // 重置上传区域显示
      function resetUploadArea(area) {
        const defaultText = area.querySelector('.file-info').previousElementSibling.textContent;
        area.querySelector('p').textContent = defaultText;
      }

      // 作品简介字数统计
      const introTextarea = document.querySelector('textarea');
      const wordCount = document.getElementById('wordCount');

      introTextarea.addEventListener('input', function() {
        wordCount.textContent = this.value.length;
      });

      // 免责声明勾选状态改变时更新提交按钮状态
      const agreementCheckbox = document.getElementById('agreement');
      const submitBtn = document.getElementById('submitBtn');

      function updateSubmitButtonState() {
        // 这里可以添加更多表单验证逻辑
        if (agreementCheckbox.checked) {
          submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
          submitBtn.classList.add('cursor-pointer');
        } else {
          submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
          submitBtn.classList.remove('cursor-pointer');
        }
      }

      agreementCheckbox.addEventListener('change', updateSubmitButtonState);

      // 提交按钮点击事件
      submitBtn.addEventListener('click', function() {
        if (!agreementCheckbox.checked) return;

        // 模拟表单提交
        this.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 提交中...';
        this.disabled = true;

        setTimeout(() => {
          alert('报名信息提交成功！我们将尽快审核您的作品。');
          // 实际应用中这里会跳转到成功页面
          this.innerHTML = '提交报名';
          this.disabled = false;
        }, 2000);
      });
    });
  </script>
</body>
</html>